<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>跟进记录</title>
    <%@include file='../../common/common.jsp' %>
    <%@include file="../../common/jsVersion.jsp" %>
    <script type="text/javascript">
    	var contextPath= '${contextPath}';
    </script>
  </head>
<body>
    <div class="main-content" id="followList">
        <div class="nav-list-title">
            <ul class="list-title-crumbs">
                <li>
                  <i class="fa fa-map-marker mainTone"></i>
                  <a class="text">跟进客户</a>
<!--                   <i class="fa fa-angle-right"></i> -->
                </li>
<!--                 <li><a class="mainTone">扩展</a></li> -->
            </ul>
        </div>
        <div class="item-info-surround">
            <h3 class="item-title">查询条件</h3>
            <ul class="exhibition-list">
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">项目名称:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.projectId" id="queryProjectId" v-on:change="initUserIdStore()">
                                <option value="">请选择</option>
                                <option v-for="(project,index) in projectList" v-bind:value="project.id">{{project.projectName}}</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">跟进人:</label>
                        <div class="template-controls">
                            <select class="form-control" v-model="params.userCode">
                                <option value="">请选择</option>
                                <option v-for="user in userList" v-bind:value="user.userCode">{{user.userName}}</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">跟进时间：</label>
                        <div class="template-controls">
                            <div class="time-selector">
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择" id="followTimeBefore" v-model="params.followTimeBefore">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                              <div class="interval-span">-</div>
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择" id="followTimeAfter" v-model="params.followTimeAfter">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-6">
                    <div class="currency-template-query">
                        <label class="template-title">提醒时间：</label>
                        <div class="template-controls">
                            <div class="time-selector">
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择" id="nextFollowTimeBefore" v-model="params.nextFollowTimeBefore">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                              <div class="interval-span">-</div>
                              <div class="time-selector-list date form_datetime">
                                <input type="text" class="form-control" placeholder="请选择" id="nextFollowTimeBefore" v-model="params.nextFollowTimeBefore">
                                <span class="timeIcon add-on"><i class="fa fa-calendar"></i></span>
                              </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-lg-8 col-md-12">
                    <div class="currency-template-query">
                        <label class="template-title">跟进方式:</label>
                        <div class="template-controls">
                            <ul class="checkbox">
                                <li>
                                    <label>
                                      <input name="followModes" type="checkbox"  value="1"  v-on:click="selectModes">来电
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input name="followModes" type="checkbox"  value="2"   v-on:click="selectModes">来访
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input name="followModes" type="checkbox"  value="3"  v-on:click="selectModes">信息
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input name="followModes" type="checkbox" value="4"  v-on:click="selectModes">去电
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input name="followModes" type="checkbox"   value="5"   v-on:click="selectModes">拜访
                                    </label>
                                </li>
                                <li>
                                    <label>
                                      <input name="followModes" type="checkbox"  value="7"  v-on:click="selectModes">微信
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="query-operation">
                <div class="fr">
                    <button class="btn" v-on:click="getList">查询</button>
                    <a href="javascript:;" class="empty" v-on:click="clearForm">清空</a>
                </div>
            </div>
        </div>
        <div class="item-info-surround bor-nb">
            <h3 class="item-title">客户跟进列表</h3>
            <div class="table-responsive">
                <table class="table table-striped table-bordered min-width-1150">
                    <thead>
                        <tr>
                            <th>客户名称</th>
                            <th>联系电话</th>
                            <th>跟进时间</th>
                            <th>跟进方式</th>
                            <th>跟进内容</th>
<!--                             <th>电话录音</th> -->
                            <th>提醒时间</th>
                            <th>提醒内容</th>
                            <th>跟进人</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr v-for="pp in ppList">
                            <td>{{pp.customerName}}</td>
                            <td>{{pp.customerPhone}}</td>
                            <td>{{pp.followTime | moment}}</td>
                            <td>{{pp.followMode | mode}}</td>
                            <td>
                                <span class="contentSet" v-if="(pp.followType==2||pp.followType==3) && permission.downLoad">
<!--                                 	<a href="javascript:void(0)" class="operationBtn" data-toggle="modal" data-target="#myModalFour" v-on:click="genjin(pp.id,pp.followType)">{{pp.followContent | content(pp.followType)}}</a>  -->
                                 	<a href="javascript:void(0)" v-if="pp.followType==2 && permission.downLoad" class="operationBtn" data-toggle="modal" data-target="#myModalFour" v-on:click="genjin(pp.id,pp.followType)">{{pp.followContent | content(pp.followType)}}</a> 
                                	<a href="javascript:void(0)" v-if="pp.followType==3 && permission.downLoad" class="operationBtn" data-toggle="modal" data-target="#myModalRadio" v-on:click="genjin(pp.id,pp.followType)">{{pp.followContent | content(pp.followType)}}</a> 
                                </span>
                                <span class="contentSet" v-else v-html="pp.followContent"></span>
                                <a href="javascript:void(0)" v-if="pp.followType!=2&&pp.followType!=3" class="operationBtn" data-toggle="modal" data-target="#myModal" v-on:click="selectContent(pp.followContent,1)">查看</a>
                            </td>
<!--                             <td>{{pp.callStatus | callStatus}}</td> -->
                            <td>{{pp.nextFollowTime | moment}}</td>
                            <td><a href="javascript:;" class="operationBtn" data-toggle="modal" data-target="#myModal" v-on:click="selectContent(pp.nextFollowContent,2)">{{pp.nextFollowContent}}</a></td>
                            <td>{{pp.userName}}</td>
                            <td>
<!--                                 <a href="javascript:void(0)" v-if="pp.followType==2 && permission.downLoad" class="operationBtn" data-toggle="modal" data-target="#myModalFour" v-on:click="genjin(pp.id,pp.followType)">{{pp.followContent | content(pp.followType)}}</a>  -->
<!--                                 <a href="javascript:void(0)" v-if="pp.followType==3 && permission.downLoad" class="operationBtn" data-toggle="modal" data-target="#myModalRadio" v-on:click="genjin(pp.id,pp.followType)">{{pp.followContent | content(pp.followType)}}</a>  -->
                                <a href="javascript:;" class="operationBtn" v-on:click="del(pp.id)" v-if="permission.del">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
				<div class="col-xs-12" id="pagination">
				</div>
			</div>
        <!-- 弹出层 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">{{content}}</h4>
                    </div>
                    <div class="modal-body">
                        <p >{{selectcontents}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图片查询 -->
        <div class="modal fade" id="myModalFour" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">图片</h4>
                    </div> -->
                    <div class="modal-body">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                          <!-- Wrapper for slides -->
                          <div class="carousel-inner" role="listbox" v-for="pic in picList" >
                            <div class="item active">
                              <img v-bind:src = pic.smallUrl alt="...">
                            </div>
                          </div>
                          <!-- Controls -->
                          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="glyphicon-carousel"><i class="fa fa-chevron-left"></i></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon-carousel"><i class="fa fa-chevron-right"></i></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
        <!-- 录音 -->
        <div class="modal fade" id="myModalRadio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title">播放录音</h4>
                    </div>
                    <div class="modal-body" v-for="radio in radioList">
                        <audio v-bind:src = radio.smallUrl preload="auto" controls></audio>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</body>
<script type="text/javascript" src="${contextPath}/static/optimization/js/customer/follow/list.js?v=${jsVersion}"></script>
<script type="text/javascript">
    $(function(){
        
        $(".form_datetime").datetimepicker({
            format: "yyyy-mm-dd",//日yyyy-mm-dd hh:ii
            autoclose: true,
            todayBtn: true,
            minView:2,//显示到天设置2、显示到时设置1、显示到分设置0
            startView:2,//首先显示的视图
            pickerPosition: "bottom-left"
            // startDate: "2016-12-14 10:00"
        });
        $( 'audio' ).audioPlayer();
    })
</script>
</html>
